<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家居家具管理系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->


    <!-- begin::dropzone -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/dropzone/dropzone.css" type="text/css">
    <!-- begin::dropzone -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="${APP_PATH}/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border text-success"></div>
    <span>加载中 ...</span>
</div>
<!-- end::page loader -->



<!-- begin::navigation -->
<jsp:include page="/WEB-INF/jsps/Manager/common/navigation.jsp"/>
<!-- end::navigation -->

<!-- begin::top -->
<jsp:include page="/WEB-INF/jsps/Manager/common/top.jsp"/>
<!-- end::top -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>个人中心</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toManager">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">个人中心</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->


        <div class="row">

            <div class="col-md-4">

                <div class="card">
                    <img src="${APP_PATH}/assets/media/image/photo9.jpg" class="card-img-top" alt="...">
                    <div class="card-body text-center m-t-70-minus">
                        <figure class="avatar avatar-xl m-b-20">
                            <img src="${APP_PATH}/${sessionScope.admin.aface == null?"assets/media/image/avatar.jpg" : sessionScope.admin.aface}" class="rounded-circle" alt="...">
                        </figure>
                        <h5>${sessionScope.admin.aname}</h5>
                        <p class="text-muted small">管理员 <a href="${APP_PATH}/toUpdateApass"><i class="ti ti-key text-warning"></i></a></p>
                        <p>${sessionScope.admin.sign}</p>
                        <button data-toggle="modal" data-target="#face" class="btn btn-outline-info">
                            <i class="ti ti-cloud-up m-r-5"></i> 上传头像
                        </button>
                    </div>
                </div>


            </div>


            <div class="col-md-8">

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">信息完成度</h5>
                        <div class="d-flex align-items-center">
                            <div class="icon-block icon-block-floating icon-block-outline-success m-r-20">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <div class="progress flex-grow-1">
                                <div id="complete" class="progress-bar bg-success" role="progressbar"
                                     aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span id="completeNum" class="h6 mb-0 ml-3"></span>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title d-flex justify-content-between align-items-center">
                            个人信息
                            <a href="javascript:;" data-toggle="modal" data-target="#update" class="btn-sm">
                                <i class="ti-pencil m-r-5"></i> 编辑
                            </a>
                        </h5>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">用户名:</div>
                            <div class="col-6">${sessionScope.admin.aname}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">电话:</div>
                            <div class="col-6">${sessionScope.admin.aphone}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">Email:</div>
                            <div class="col-6">${sessionScope.admin.aemail}</div>
                        </div>

                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title m-b-15">个性签名</h6>
                        <form action="${APP_PATH}/admin/updateSign" method="post">
                            <input type="hidden" name="aid" value="${sessionScope.admin.aid}"/>
                            <div class="form-group">
                                <textarea name="sign" rows="3" class="form-control" placeholder="写点什么吧...">${sessionScope.admin.sign}</textarea>
                            </div>
                            <div class="d-flex justify-content-between">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="update" tabindex="-1" role="dialog"
             aria-labelledby="updateTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="updateTitle">编辑个人信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form id="updateInfo" action="${APP_PATH}/admin/updateInfo" method="post" class="needs-validation" novalidate>
                            <input type="hidden" name="aid" value="${sessionScope.admin.aid}"/>
                            <div class="form-group">
                                <label for="aname" class="col-form-label">用户名:</label>
                                <input type="text" class="form-control" id="aname" name="aname" required value="${sessionScope.admin.aname}">
                                <div class="invalid-feedback">
                                    这是必填项哦~
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="aphone" class="col-form-label">电话:</label>
                                <input type="text" class="form-control" id="aphone" name="aphone" value="${sessionScope.admin.aphone}">
                            </div>

                            <div class="form-group">
                                <label for="aemail" class="col-form-label">Email:</label>
                                <input type="text" class="form-control" id="aemail" name="aemail" value="${sessionScope.admin.aemail}">
                            </div>

                        </form>
                    </div>

                    <div class="modal-footer">
                        <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">算了...
                        </button>
                        <input type="submit" class="btn btn-primary"  onclick="return updateInfo()" value="决定了！"/>
                    </div>

                </div>
            </div>
        </div>


        <div class="modal fade bd-example-modal-sm" id="face" tabindex="-1" role="dialog" aria-labelledby="faceTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="faceTitle">上传头像</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" onclick="updateFace()">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">

                        <label class="col-form-label">请上传一张头像:</label>
                        <form action="${APP_PATH}/admin/afaceUpload" class="dropzone"></form>
                    </div>

                    <div class="modal-footer">
                        <button  type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateFace()">ojbk</button>
                    </div>

                </div>
            </div>
        </div>


        <!-- begin::bottom -->
        <div class="card-group">
            <jsp:include page="/WEB-INF/jsps/Manager/common/bottom.jsp"/>
        </div>
        <!-- end::bottom -->

    </div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="${APP_PATH}/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::dropzone -->
<script src="${APP_PATH}/assets/vendors/dropzone/dropzone.js"></script>
<!-- end::dropzone -->

<!-- begin::custom scripts -->
<script src="${APP_PATH}/assets/js/custom.js"></script>
<script src="${APP_PATH}/assets/js/app.js"></script>
<!-- end::custom scripts -->
<script>
    var nullAname = false;
    $("#aname").on("keyup blur",function () {
        validationNull("#aname");
    });
    function validationNull(id) {
        var newAname = $(id).val();
        if(newAname ==''){
            nullAname = true;
            $(id).removeClass("is-valid");
            $(id).addClass("is-invalid");
        }else{
            nullAname = false;
            $(id).removeClass("is-invalid");
            $(id).addClass("is-valid");
        }
    }
</script>

<script>
    var multiple = false;
    var fileMap = new Map();
    var fileNum = 1;
    $(function () {
        fileMap.set(1,null);
        var complete = 0;
        if(${sessionScope.admin.aphone != null}){
            complete += 25;
        }
        if(${sessionScope.admin.aemail != null}){
            complete += 25;
        }
        if(${sessionScope.admin.aface != null}){
            complete += 25;
        }
        if(${sessionScope.admin.sign != null}){
            complete += 25;
        }
        $("#complete").attr("aria-valuenow",complete);
        $("#complete").css("width",complete+"%");
        $("#completeNum").html(complete+"%");
    });

    function updateFace() {
        var f;
        f = $("#face").find(".dz-image").html();
        if(f != undefined){

            $.ajax({
                url : "${APP_PATH}/admin/updateFace",
                method : "POST",
                data : {
                    aid : ${sessionScope.admin.aid}
                },
                success: function (result) {
                    if(result.success){
                        swal("上传成功！", {icon: "success"}).then((value) => {
                       window.location.href = '${APP_PATH}/toAdminInfo';
                    });
                    }else{
                        swal("上传失败！", {icon: "error"});
                    }
                }
            });
        }
    }

function updateInfo() {
    validationNull("#aname");
    if(!nullAname){
        $("#updateInfo").submit();
    }
    return false;
}
</script>
</body>
</html>
